<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Keywords" content="">
	<meta name="description" content="">
    <title>微信公众号编辑</title>
    <link rel="shortcut icon" type="image/x-icon" href="skin/images/favicon.ico">
    <!--公共部分-->
    <link href="skin/css/layout.css" type="text/css" rel="stylesheet" />
	<script src="skin/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <!--私有部分-->
    <link href="skin/css/frame.style.css" type="text/css" rel="stylesheet" />
	<script src="skin/js/default.common.js" type="text/javascript"></script>
    <link href="skin/css/default.style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrap">
	<!--star left-->
	<div class="column">
		<script type="text/javascript">
        $(".column").load("public_html/column.html");
        </script>
    </div>
    <div id="ContMianBox">

        <!--star子栏目-->
        <div class="sub-colum">
            <div class="tit">营销中心</div>
            <ul>
                <li class="curr"><a href="#" onClick="$('.cetContent').load('public_html/营销渠道.htm'), function () {return false;}">营销渠道</a></li>
                <li><a href="#" onClick="$('.cetContent').load('public_html/促销工具.htm'), function () {return false;}">促销工具</a></li>
                <li><a href="#" onClick="$('.cetContent').load('public_html/会员管理.htm'), function () {return false;}">会员管理</a></li>
                <li><a href="#" onClick="$('.cetContent').load('public_html/服务订购.htm'), function () {return false;}">服务订购</a></li>
            </ul>
        </div>
        <!--end子栏目-->
        <!--end left-->
        <div class="container narrow">
            <!--star conter-->
            <div class="cetContent">
                <div class="tit p-lr20">
                    <span class="curr">营销渠道</span>
                </div>
                <!--star内容区域-->
                <div class="mainScroll">
                    <div class="mainContainer line-all">
                        <!--star-->
                        <div class="wx-design fix">
                        	<!--star左边-->
                            <div class="wx-preview">
                            	<div class="wx-entry">
                                	<div class="wx-fields">鄱阳湖特产</div>
                                </div>
                                <div class="add-region">
                                	<ul class="menu_list">
                                    	<li class="menu_item add_fisrt_item selected" onClick="JSaddMenuTips(this)">
                                            <a href="javascript:void(0);" class="menu_link" title="最多添加3个一级菜单">
                                                <i class="icon_menu_add"></i>
                                            	<span class="js_Title01">添加菜单</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!--end 左边-->
                        	<!--star右边-->
                            <div class="wx-sidebar">
                            	<div id="js_none" class="menu_initial_tips tips_global" style="display:none;">点击左侧菜单进行编辑操作</div>
                                <div id="js_rightBox" style="display:none;">
                                    <div class="editor_inner">
                                        <!--star mt-->
                                        <div class="menu_form_mt">
                                            <h4>菜单名称</h4>
                                            <div class="global_extra"><a href="javascript:void(0);" onClick="JSdelmenu(this)">删除菜单</a></div>
                                        </div>
                                        <!--end mt-->
                                        <!--star mc-->
                                        <div class="menu_form_mc" id="view">
                                            <div class="frm_control_group m-t30 m-b10 subfonttip">
                                                <label for="" class="frm_label"></label>
                                                <div class="frm_controls">
                                                	已添加子级栏目，跳转网页禁止！
                                                </div>
                                            </div>
                                            <div class="frm_control_group m-t30 m-b10">
                                                <label for="" class="frm_label">
                                                    <strong class="title js_menuTitle">菜单名称</strong>
                                                </label>
                                                <div class="frm_controls">
                                                    <span class="frm_input_box counter_in">
                                                        <input class="frm_input js_menu_name" type="text" maxlength="5">
                                                    </span>
                                                    <p class="frm_msg fail js_titleEorTips">字数超过上限</p>
                                                    <p class="frm_msg fail js_titlenoTips">请输入菜单名称</p>
                                                    <p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p>
                                                </div>
                                            </div>
                                            <div class="frm_control_group m-t30 m-b10">
                                                <label for="" class="frm_label">
                                                    <strong class="title js_menuContent">菜单内容</strong>
                                                </label>
                                                <div class="frm_controls">
                                                    <label class="frm_radio_label"><input type="radio" checked="true">跳转网页</label>
                                                </div>
                                            </div>
                                            <div class="menu_content">
                                                <p class="tips_global p-b10">订阅者点击该子菜单会跳到以下链接</p>
                                                <div class="frm_control_group">
                                                    <label for="" class="frm_label">页面地址</label>
                                                    <div class="frm_controls">
                                                        <span class="frm_input_box">
                                                        <input class="frm_input" id="urlText" name="urlText" type="text">
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end mc-->
                                    </div>
                                    <span class="editor_arrow_wrp">
                                        <i class="editor_arrow editor_arrow_out"></i>
                                        <i class="editor_arrow editor_arrow_in"></i>
                                    </span>
                                    <!--star 下面发布按钮-->
                                    <div class="p-t20">
                                    <a href="javascript:;" class="zent-btn zent-btn-40d064" style="padding:0 30px;">发布</a>
                                    <a href="javascript:;" class="zent-btn" style="padding:0 30px;">预览</a>
                                    </div>
                                    <!--end 下面发布按钮-->
                                </div>
                            </div>
                            <!--end 右边-->
                        </div>
                        <!--end-->
                        
                    </div>
                </div>
                <!--end内容区域-->
            </div>
            <!--end conter-->
        </div>
    </div>
</div>
<link href="skin/css/weixin.style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
/*
1.变量curr与变量selected有区别
2.通过这两个变量控制子集与父级
3.添加第一级绑定selected当前状态
4.添加第二级也是绑定selected当前状态，同时移除我的上一级状态selected，为了区分显示问题又在我的上一级追加了一个curr【注：有子集的时候上一级就绑定了curr（class="hasClass"）】
5.当点击第一级的时候移除curr添加selected，下一级的selected同时被移除。点击第二级的时候跟添加第二级一样的状态。
*/
var HTML_muli = '',
	HTML_subli = '',
	str = '2017-01-04',
	timestamp = new Date(str).getTime(),
	events = 'click',curr = 'hasClass',
	selected = 'selected',
	sizef1 = 'sizef1',
	sizef2 = 'sizef2',
	sizef3 = 'sizef3',
	menulist = '.menu_list',
	submenulist = '.sub_menu_list',
	eor = '.js_titlenoTips',
	nul = '.js_titleEorTips',
	not = '.js_titleNolTips',
	titdefault = '菜单名称',
	txtName = 'input.js_menu_name',
	titName = '.menu_form_mt h4',
	onetit = '.js_Title01',
	twotit = '.js_Title02',
	oneadd = '.add_fisrt_item',
	twoadd = '.add_sub_item',
	onelevel = 'li.menu_item',
	twolevel = 'li.sub_item';

//添加菜单
function JSaddMenuTips(objthis){
	$this = $(objthis);
	$this.find('span').remove();
	$this.removeClass(selected);
	$(menulist).find(oneadd).before(HTML_muli);
	var li= $(menulist).find(onelevel);
	var gh = li.length;
	if(gh==2){
		li.addClass(sizef2);
	}else if(gh==3){
		li.addClass(sizef3).removeClass(sizef2);
	}else{
		$this.hide();
		li.addClass(sizef3).removeClass(sizef2);
	}
	li.not(oneadd).addClass(selected).prev().removeClass(selected);
	li.not(oneadd).removeClass(curr);//添加菜单同级还有hasClass移除;
	li.not(oneadd).each(function(i){
		$(this).attr('id',timestamp + '_menu_'+ i)
	});
	$(eor).hide();
	JShover();
	editText();
	conGroup();
	//suiDot();
	$('.subfonttip').hide();
	$('.menu_content').show();
}

//添加子菜单
function JSsubView(objthis){//此地方有问题
	var $this = $(objthis);
	var li= $(submenulist).find(twolevel);
	$(menulist).find('li.'+selected+' '+submenulist+'').children(twoadd).before(HTML_subli);
	$(menulist).find('li.'+curr+' '+submenulist+'').children(twoadd).before(HTML_subli);
	$this.parents(''+onelevel+'.'+selected+'').addClass(curr);//添加curr，注：【我与下一排的循序不能变】
	$this.parents(''+onelevel+'.'+selected+'').removeClass(selected);//添加第二级后第一级移除selected
	$this.parents(twoadd).prev(twolevel).addClass(selected).siblings(twolevel).removeClass(selected);
	JSsubHover();
	editText();
	conGroup();
	suiDot();
	ifelse();
	$('.subfonttip').hide();
	$('.menu_content').show();
}

//父级点击选中
function JShover(){
	$(menulist).find(onelevel).not(oneadd).children('.menu_link').bind(events, function(){
		$(this).parent(onelevel).find(twolevel).removeClass(selected);//点击第一级就马上移除第二级所有存在selected值
		$(this).parent(onelevel).addClass(selected).siblings().removeClass(selected);//第一级添加绑定，同时移除同级绑定元素
		$(this).parent(onelevel).siblings().removeClass(curr);//选中第一级的时候，同级移除curr
		$(this).parent(onelevel).removeClass(curr);
		$(menulist).find(submenulist).children(twolevel).removeClass(selected);
		conGroup();
		suiDot();
	});
}

//子级点击选中
function JSsubHover(){
	$(submenulist).find(twolevel).bind(events, function(){
		$(this).parents(''+onelevel+'.'+selected+'').addClass(curr);
		$(this).parents(''+onelevel+'.'+selected+'').removeClass(selected);//添加第二级后第一级移除selected
		$(this).parents(''+onelevel+'.'+selected+'').find('.sub_menu_box').show();
		$(this).addClass(selected).siblings().removeClass(selected);
		conGroup();
		//suiDot();
		ifelse();
		$('.subfonttip').hide();
		$('.menu_content').show();
	});
}

//如果有子集就显示图标
function suiDot(){
	var subli1 = $(menulist).find(''+onelevel+'.'+curr+'').find(submenulist).children(twolevel);
	var subli2 = $(menulist).find(''+onelevel+'.'+selected+'').find(submenulist).children(twolevel);
	if(subli1.length>0 || subli2.length>0){
		$(menulist).find(''+onelevel+'.'+curr+' .menu_link i.icon_menu_dot').css({'display':'inline-block'});//如果有子集父级显示图标
		$('.subfonttip').show();//子级文字提示！请根据你想要的修改
		$('.menu_content').hide();
	}else{
		$(menulist).find(''+onelevel+'.'+curr+' .menu_link i.icon_menu_dot').css({'display':'none'});
		$('.subfonttip').hide();
		$('.menu_content').show();
		//$(menulist).find(''+onelevel+'.'+curr+'').addClass(selected).removeClass(curr);
	}
}

//点击赋值
function conGroup(){
	$('#js_rightBox').show().siblings('#js_none').hide();
	var li = $(menulist).find('li').not(oneadd);
	li.each(function(){
		if($(this).hasClass(selected)){
			var val = $(this).find(onetit).html();
			$(txtName).val(val);
			$(titName).html(val);
		}
		if($(menulist).find(onelevel).hasClass(selected)){
			$('.js_menuTitle').text(titdefault);	
		}else{
			$('.js_menuTitle').text('子'+titdefault);	
		}
	});
	
}

//输入状态
function editText(){
	var thisContent = $(txtName);
	thisContent.change(function(){
		ifelse();
	})
};

//输入赋值
function ifelse(){
	var thisContent = $(txtName);
	if(thisContent.val().length > 5){
		$(nul).show();
	}else{
		$(nul).hide();	
	}
	
	var oneli = $(menulist).find(onelevel).not(oneadd);
	var twoli = $(menulist).find(twolevel).not(twoadd);
	if($(menulist).find('li.menu_item.selected').children('a').hasClass('menu_link')){
		if(thisContent.val() == ''){
			$(menulist).find(''+onelevel+'.'+selected+' a.menu_link').children(onetit).text(titdefault);
			$(titName).text(titdefault);
			$(eor).show();
		}else{
			$(menulist).find(''+onelevel+'.'+selected+' a.menu_link').children(onetit).text(thisContent.val());	
			$(titName).text(thisContent.val());
			$(eor).hide();	
		}
	}else{
		if(thisContent.val() == ''){
			$(submenulist).find(''+twolevel+'.'+selected+' a').find(onetit).text('子'+titdefault);
			$(titName).text('子'+titdefault);
			$(eor).show();
		}else{
			$(submenulist).find(''+twolevel+'.'+selected+' a').find(onetit).text(thisContent.val());	
			$(titName).text(thisContent.val());
			$(eor).hide();	
		}
	}
}

//点击删除菜单
function JSdelmenu(){
	var li = $(menulist).find('li');
	var oneli = $(menulist).find(onelevel);
	var twoli = $(menulist).find(twolevel).not(twoadd);
	li.attr('class',function(){
		var attrClass = $(this).attr('class');
		if(attrClass == 'sub_item selected'){//删除子集
			$(submenulist).find(''+twolevel+'.'+selected+'').remove();
		}
		if(oneli.not(oneadd).hasClass(selected)){
			$(menulist).find(''+onelevel+'.'+selected+'').not(oneadd).remove();
			$(menulist).find(oneadd).show();
			var gh = oneli.length - 1;
			if(gh==3){
				oneli.addClass(sizef3).removeClass(sizef2);
			}else if(gh==2){
				oneli.addClass(sizef2).removeClass(sizef3);
			}else{
				oneli.removeClass(sizef2);
				$(menulist).find(oneadd).show().addClass(selected);
				$(menulist > oneadd).find('a').append('<span class="js_Title01">添加菜单</span>')
			}
		}
		$('#js_rightBox').hide().siblings('#js_none').show();
	});
	suiDot();
}

$(function(){
	HTML_muli = '<li class="menu_item">'+
					'<a href="javascript:void(0);" class="menu_link"><i class="icon_menu_dot"></i><span class="js_Title01">菜单名称</span></a>'+
					'<div class="sub_menu_box"><ul class="sub_menu_list">'+
						'<li class="add_sub_item"><a onClick="JSsubView(this)" href="javascript:void(0);" title="最多添加5个子菜单"><span class="sub_menu_inner"><i class="icon_menu_add"></i></span></a></li>'+
						'<i class="arrow arrow_out"></i><i class="arrow arrow_in"></i>'+
					'</ul></div>'+
				'</li>';
	HTML_subli = '<li class="sub_item"><a href="javascript:void(0);"><span class="sub_menu_inner"><span class="js_Title01">子菜单名称</span></span></a></li>';		

})
</script>
</body>
</html>

